<template>
  <div class="container">
    <div class="cheader">
      <!-- <img
        @click="setShow = true"
        class="cimg1"
        src="@/assets/images/huser.png"
        alt=""
      /> -->
      <van-icon
        v-if="userInfos.email"
        name="smile"
        @click="setShow = true"
        class="cimg1"
      />
      <div class="lbtn" v-else @click="toPage('/login')">登录</div>
      <div class="ctitle">微澜AI智能交易平台</div>
      <div></div>
      <!-- <img class="cimg1" src="@/assets/images/hlaba.png" alt="" /> -->
    </div>
    <van-swipe class="my-swiper" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in banners"
        :key="index"
        @click="toDetail(item)"
      >
        <img class="banimg" :src="item.image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="nobox">
      <img
        @click="toPage('/noticelist')"
        class="mimg"
        src="@/assets/images/more.png"
        alt=""
      />
      <van-notice-bar left-icon="volume" :scrollable="false" color="#666973">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :touchable="false"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in notices"
            :key="index"
            @click="toDetail(item)"
            >{{ item.title }}</van-swipe-item
          >
        </van-swipe>
      </van-notice-bar>
    </div>
    <!-- <van-grid :border="false">
      <van-grid-item v-for="(item, index) in girdList" :key="item.title">
        <div class="grbox" @click="handleGirdItem(item, index)">
          <img :src="item.img" alt="" />
          <div class="gr1">{{ item.title }}</div>
        </div>
      </van-grid-item>
    </van-grid> -->

    <div class="mbox2">
      <div class="mb2" style="margin-bottom: 10px">
        <div class="mb2-item">
          <img src="@/assets/images/sy1.png" alt="" />
          <div class="mb2-1">累计收益</div>
          <div class="mb2-2">
            {{ platformInfos.profitTotal }}
            <span style="font-size: 12px">USDT</span>
          </div>
        </div>
        <div class="mb2-item mb2-item2">
          <img src="@/assets/images/sy2.png" alt="" />
          <div class="mb2-1">昨日收益</div>
          <div class="mb2-2">
            {{ platformInfos.profitYesterday }}
            <span style="font-size: 12px">USDT</span>
          </div>
        </div>
      </div>
      <div class="mb3">
        <div class="mb3-1">
          <img src="@/assets/images/hok.png" alt="" />
          <div class="mb31">OKX授权</div>
        </div>
        <div class="mb3-2" @click="toPage('/zapi')">
          {{ handleAPI('OKX') }}
        </div>
      </div>
    </div>
    <div class="mbox1">
      <div class="mt1">
        <!-- <img src="@/assets/images/bb4.png" alt="" /> -->
        <div class="mf1">保险金</div>
        <!-- <div class="mf2">{{ platformInfos.margin }} USDT</div> -->
      </div>
      <div class="mt2" style="margin: 24px 0">
        <img src="@/assets/images/bb4.png" alt="" />
        <div
          class="mt2-1"
          @click="handleScan(platformInfos.tronAddress, 'tron')"
        >
          {{ handleAddress(platformInfos.tronAddress) }}
        </div>
        <div class="mt2-2" @click="copyDomText(platformInfos.tronAddress)">
          复制
        </div>
      </div>
      <div class="mt2" style="margin-bottom: 20px">
        <img src="@/assets/images/bsc.png" alt="" />
        <div class="mt2-1" @click="handleScan(platformInfos.bscAddress, 'bsc')">
          {{ handleAddress(platformInfos.bscAddress) }}
        </div>
        <div class="mt2-2" @click="copyDomText(platformInfos.bscAddress)">
          复制
        </div>
      </div>
      <div class="mt3">点击地址可到相应区块链浏览器查看</div>
    </div>
    <div class="mbox3">
      <div class="m3-title">最新行情</div>
      <div class="ulbox">
        <div class="libox" v-for="(item, index) in rankList" :key="item.name">
          <div class="li-l">
            <img class="li-img" :src="item.image" alt="" />
            <div class="li2">
              <div class="li2-1">{{ item.name }}</div>
              <div class="li2-2">{{ item.chain }}</div>
            </div>
          </div>
          <div class="li-r">
            <div class="li3">
              <div :class="'li3-1' + ' ' + colorArr[index]">
                {{ item.lastPrice }}
              </div>
              <div class="li3-2">${{ item.lastPrice }}</div>
            </div>
            <div class="li4" :class="item.priceFloat < 0 ? 'hong' : ''">
              {{ item.priceFloat }}%
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model:show="setShow"
      position="left"
      :style="{ height: '100vh', width: '76vw' }"
    >
      <div class="pbox">
        <div class="ptbox1">
          <div class="pt1">
            Hi.{{ userInfos.email }} <br />
            欢迎使用微澜AI智能交易平台
          </div>
          <div class="pt2" style="margin: 14px 0 14px">
            <div class="pt2-1">UID: {{ userInfos.id }}</div>
            <img
              @click="copyDomText(userInfos.id)"
              class="pt2-2"
              src="@/assets/images/fuzhi.png"
              alt=""
            />
          </div>
          <div class="pt2" style="margin: 0px 0 20px">
            <div class="pt2-1">
              地址: {{ handleAddressString(userInfos.address) }}
            </div>
            <img
              @click="copyDomText(userInfos.address)"
              class="pt2-2"
              src="@/assets/images/fuzhi.png"
              alt=""
            />
          </div>
          <div class="pt3">等级:{{ userInfos.level }}</div>
        </div>
        <div class="ptbox2">
          <div
            class="ptli"
            v-for="(item, index) in setList"
            :key="item.name"
            @click="toPage(item.to)"
          >
            <div class="ptli-1">
              <img
                :src="require('@/assets/images/s' + (index + 1) + '.png')"
                alt=""
              />
              <div class="ptli-2">{{ item.name }}</div>
            </div>
            <van-icon name="arrow" color="#000" />
          </div>
        </div>
        <div class="abli">
          <div class="abli1">客服邮箱：</div>
          <div class="abli2">
            service@duckweedtradeai.com<img
              @click="copyDomText('service@duckweedtradeai.com')"
              class="pt2-2"
              src="@/assets/images/fuzhi.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- <van-dialog v-model:show="marginShow">
      <div class="mbox1">
        <div class="mt1">
          <img src="@/assets/images/bb4.png" alt="" />
          <div class="mf1">当前保险金资产:</div>
          <div class="mf2">{{ platformInfos.margin }} USDT</div>
        </div>
        <div class="mt2">
          <div class="mt2-1">{{ platformInfos.address }}</div>
          <div class="mt2-2" @click="copyDomText(platformInfos.address)">
            复制
          </div>
        </div>
        <div class="mt3">复制到TRON区块链浏览器查看</div>
      </div>
    </van-dialog> -->
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, computed, onUnmounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { copyDomText, SOCKET_URL } from "@/utils/common";
import { Dialog, Toast } from "vant";
import http from "@/utils/http";
import { OKX_ID} from "@/utils/common";

const store = useStore();
const router = useRouter();
const setShow = ref(false);

const userInfos = computed(() => store.state.users.infos);
const token = computed(() => store.state.users.token);
let rankList = ref<any[]>([]);
const banners = computed(() => store.state.systems.banners);
const notices = computed(() => store.state.systems.notices);
const handleAddressString = (address: string) => {
  return (
    address.substring(0, 8) +
    "******" +
    address.substring(address.length - 8, address.length)
  );
};
// router.push({
//   path: "/webview",
//   query: {
//     hash: detail[item.prop],
//   },
// });
const handleScan = (address: string, type: string) => {
  window.open(
    type === "tron"
      ? "https://tronscan.org/#/address/" + address
      : "https://bscscan.com/address/" + address
  );
  // router.push({
  //   path:'/webview',
  //   query:{
  //     address,
  //     type
  //   }
  // })
};
const handleAPI = (name:string)=>{
  const ret = name === 'OKX' ? userInfos.value.bindingPlatformList?.includes(OKX_ID) : undefined
  return ret ? '已授权' : 'API授权'
}
const girdList = [
  // 充值，返佣，定投计划，策略交易，聊天室，API授权，保险金，排名榜
  {
    title: "充值",
    img: require("@/assets/images/gr1.png"),
    url: "",
  },
  {
    title: "返佣",
    img: require("@/assets/images/gr2.png"),
    url: "",
  },
  {
    title: "定投计划",
    img: require("@/assets/images/gr3.png"),
    url: "",
  },
  {
    title: "策略交易",
    img: require("@/assets/images/gr4.png"),
    url: "",
  },
  {
    title: "聊天室",
    img: require("@/assets/images/gr5.png"),
    url: "",
  },
  {
    title: "API授权",
    img: require("@/assets/images/gr6.png"),
    url: "",
  },
  {
    title: "保险金",
    img: require("@/assets/images/gr7.png"),
    url: "",
  },
  {
    title: "排名榜",
    img: require("@/assets/images/gr8.png"),
    url: "",
  },
];
const handleGirdItem = (item: any, index: number) => {
  if (index === 0) {
    router.push("/capital/recharge");
  } else if (index === 1) {
    Toast("即将上线,敬请期待");
  } else if (index === 2) {
    Toast("即将上线,敬请期待");
  } else if (index === 3) {
    router.push("/strategy");
  } else if (index === 4) {
    Toast("即将上线,敬请期待");
  } else if (index === 5) {
    router.push("/zapi");
  } else if (index === 6) {
    // marginShow.value = true;
  } else if (index === 7) {
    Toast("即将上线,敬请期待");
  }
};
const platformInfos = reactive({
  margin: 0,
  address: "",
  bscAddress: "",
  tronAddress: "",
  profitYesterday: 0,
  profitTotal: 0,
});
let websocket: any;
let colorArr = reactive<any>([]);
onMounted(() => {
  let rankList_ = localStorage.getItem("rankList_");
  if (rankList_) {
    rankList.value = JSON.parse(rankList_);
  }
});
onUnmounted(() => {
  localStorage.setItem("rankList_", JSON.stringify(rankList.value));
  websocket && websocket.close();
});

watch(rankList, (newVal, oldVal) => {
  try {
    colorArr = [];
    newVal.forEach((v, i) => {
      if (+v.lastPrice > +oldVal[i].lastPrice) {
        colorArr[i] = "more";
      } else if (+v.lastPrice < +oldVal[i].lastPrice) {
        colorArr[i] = "kong";
      } else if (+v.lastPrice == +oldVal[i].lastPrice) {
        colorArr[i] = "baise";
      }
    });
  } catch (error) {
    //
  }
});
const toDetail = (item: any) => {
  if (item.textContent) {
    store.commit("systems/updateDatas", {
      key: "detailContent",
      data: item,
    });
    router.push("/acticaldetail");
  }
};
const handleWebSocket = () => {
  console.log(userInfos.value.token);
  websocket = new WebSocket(
    `${SOCKET_URL}/system/ws/info?access_token=${token.value}`
  );
  websocket.onopen = () => {
    websocket.send(
      JSON.stringify({
        type: "subscribe",
        params: {
          requestApi: "symbol_quotations",
          requestParam: {},
        },
      })
    );
  };
  websocket.onmessage = (data: any) => {
    if (data.data) {
      rankList.value = JSON.parse(data.data);
    }
  };
};
const handleAddress = (address: string) => {
  return (
    address.substring(0, 8) +
    "******" +
    address.substring(address.length - 8, address.length)
  );
};
const getPlatformInfo = () => {
  http.get("user/fuel_receive_dividends/margin").then((res: any) => {
    if (res.code === 0) {
      platformInfos.margin = res.data.marginBalance || 0;
      platformInfos.tronAddress = res.data.tronAddress || "";
      platformInfos.bscAddress = res.data.bscAddress || "";
    }
  });
  http.get("strategy/app/contract/profit").then((res: any) => {
    if (res.code === 0) {
      platformInfos.profitTotal = res.data.profitTotal || 0;
      platformInfos.profitYesterday = res.data.profitYesterday || 0;
    }
  });
};
const setList = [
  {
    name: "邀请好友",
    to: "/share",
  },
  {
    name: "API授权",
    to: "/zapi",
  },
  {
    name: "修改邮箱",
    to: "/editemail",
  },
  {
    name: "修改授权地址",
    to: "/editaddress",
  },
  {
    name: "修改资金密码",
    to: "/editpass",
  },
  {
    name: "关于我们",
    to: "/about",
  },
  {
    name: "退出登录",
    to: "/logout",
  },
];

const handleBanners = () => {
  store.dispatch("systems/getBanner");
  store.dispatch("systems/getNotice");
};

const toPage = (url: string) => {
  if (url === "/logout") {
    Dialog({
      title: "提示",
      showCancelButton: true,
      message: "确定退出?",
    })
      .then(() => {
        store.commit("users/clearToken");
        router.push("/login");
      })
      .catch(() => {
        // on cancel
      });
  } else {
    router.push(url);
  }
};
watch(
  token,
  (newVal, oldVal) => {
    if (token.value) {
      if (userInfos.value?.isLogin !== false) {
        store.dispatch("users/updateUserInfo");
      }
      handleWebSocket();
      handleBanners();
      getPlatformInfo();
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.cheader {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: relative;
  .cimg1 {
    width: 30px;
    font-size: 26px;
    color: #36b4ea;
  }
  .lbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    font-size: 12px;
    color: #36b4ea;
    background: #f1f1f1;
    border-radius: 200px;
    padding: 8px 12px;
  }
  .ctitle {
    font-size: 16px;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }
}
.van-swipe-item {
  width: 100vw !important;
  color: #fff !important;
  font-size: 13px;
}
.my-swipe {
  padding: 0 10px;
  .van-swipe-item {
    width: 100vw !important;
    color: #fff !important;
    font-size: 13px;
  }
}

.banimg {
  width: 94vw;
  height: 150px;
  display: block;
  border-radius: 2px;
  margin: 0 auto !important;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
  .van-swipe-item {
    font-weight: 600;
    color: #666973 !important;
  }
}
.van-notice-bar {
  background-color: transparent;
  color: #000;
  position: relative;
}
.nobox {
  position: relative;
  .mimg {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 15px;
    transform: translateY(-50%);
    z-index: 999;
  }
}

.mbox1 {
  padding: 20px 4px;
  background-color: rgba(0, 0, 0, 0.03);
  margin: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  .mt1 {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      margin-right: 4px;
    }
    .mf1 {
      font-size: 14px;
      color: #000;
      font-weight: 600;
      // margin-right: 4px;
    }
    .mf2 {
      font-size: 15px;
      color: #36b4ea;
      font-weight: 600;
    }
  }
  .mt2 {
    font-size: 13px;
    color: #000;
    display: flex;
    align-items: center;
    img {
      width: 20px;
      margin-right: 10px;
    }
    .mt2-1 {
      width: 190px;
      font-size: 14px;
      color: #444;
      // width: 260px;
      // overflow: hidden; //超出隐藏
      // white-space: nowrap; //不折行
      // text-overflow: ellipsis; //溢出显示省略号
      // text-decoration: underline;
    }
    .mt2-2 {
      color: #36b4ea;
    }
  }
  .mt3 {
    color: #878b97;
    font-size: 12px;
    text-align: center;
  }
}
.mbox2 {
  padding: 10px;
  margin: 0px 10px;
  border-radius: 4px;
  .mb2 {
    display: flex;
    justify-content: space-between;
    .mb2-item {
      padding: 12px 14px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.03);
      position: relative;
      height: 54px;
      width: 35vw;
      img {
        position: absolute;
        width: 36px;
        top: 14px;
        left: 14px;
      }
      .mb2-1 {
        position: absolute;
        top: 14px;
        right: 14px;
        font-size: 12px;
        color: #878b97;
      }
      .mb2-2 {
        position: absolute;
        bottom: 12px;
        right: 14px;
        font-size: 17px;
        font-weight: 600;
        color: #000;
      }
    }
    .mb2-item2 {
      text-align: right;
    }
  }
  .mb3 {
    height: 44px;
    line-height: 20px;
    border-radius: 4px;
    background-color: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom:1px solid #fff;
    &:last-child{
      border:0;
    }
    .mb3-1 {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #000;
      img {
        width: 24px;
        height:24px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
    .mb3-2 {
      font-size: 14px;
      color: #36b4ea;
    }
  }
}
.mbox3 {
  padding: 0 20px;
  .m3-title {
    font-size: 16px;
    color: #666973;
    margin: 10px 0;
  }
  .ulbox {
    .libox {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .li-l,
      .li-r {
        display: flex;
        align-items: center;
      }
      .li-img {
        width: 26px;
        height: 26px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .li2 {
        display: flex;
        flex-direction: column;
        .li2-1 {
          font-size: 15px;
          color: #000;
          margin-bottom: 8px;
        }
        .li2-2 {
          font-size: 12px;
          color: #000;
        }
      }
      .li3 {
        display: flex;
        flex-direction: column;
        text-align: right;
        .li3-1 {
          font-size: 14px;
          font-weight: 600;
          color: #5eba89;
          margin-bottom: 8px;
        }
        .li3-2 {
          font-size: 12px;
          color: #000;
        }
      }
      .li4 {
        width: 72px;
        height: 34px;
        color: #fff;
        line-height: 34px;
        text-align: center;
        background-color: #5eba89;
        border-radius: 2px;
        margin-left: 40px;
        font-size: 13px;
      }
    }
  }
}
.hong {
  background-color: #d75656 !important;
}
.pbox {
  height: 100%;
  // background-color: #0b101c;
  padding: 0 25px;
  .ptbox1 {
    padding: 40px 0 0px;
    .pt1 {
      font-size: 14px;
      color: #000;
      line-height: 26px;
    }
    .pt2 {
      display: flex;
      align-items: center;
      .pt2-1 {
        font-size: 12px;
        color: #666973;
      }
      .pt2-2 {
        width: 14px;
        margin-left: 10px;
      }
    }
    .pt3 {
      font-size: 12px;
      color: #36b4ea;
    }
  }
  .ptbox2 {
    margin-top: 30px;
    .ptli {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .ptli-1 {
        display: flex;
        height: 45px;
        align-items: center;
        img {
          width: 20px;
          margin-right: 13px;
        }
        .ptli-2 {
          font-size: 13px;
          color: #000;
        }
      }
    }
  }
}
.baise {
  color: #000 !important;
}
.more {
  color: #5eba89 !important;
}
.kong {
  color: #d75656 !important;
}

.grbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 30px;
    height: 30px;
  }
  .gr1 {
    font-size: 12px;
    color: #666973;
    margin-top: 10px;
    font-weight: 600;
  }
}
.van-grid-item {
  &:nth-child(2) {
    .grbox {
      img {
        width: 38px;
        height: 38px;
        position: relative;
        top: -3px;
      }
      .gr1 {
        margin-top: 2px;
      }
    }
  }
  &:nth-child(5) {
    .grbox {
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: -3px;
      }
      .gr1 {
        margin-top: 4px;
      }
    }
  }
}
.abli {
  display: flex;
  // align-items: center;
  flex-direction: column;
  .abli1 {
    font-size: 13px;
    color: #878b97;
    margin: 20px 0 10px;
  }
  .abli2 {
    font-size: 13px;
    color: #000;
    display: flex;
    align-items: center;
    img {
      width: 12px;
      margin-left: 5px;
    }
  }
}
</style>
